<template>
    <t-modal :title="title" :width="500" :visible="visible" :confirmLoading="loading" @ok="() => { $emit('ok'); }"
        @cancel="() => { $emit('cancel'); }">
        <a-spin :spinning="loading">
            <a-form :form="form">
                <a-form-item :label="$ct('ruleName', '规则名称')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="规则名称"
                        v-decorator="['ruleName', { rules: [{ required: true, message: '请输入规则名称！' },], },]" />
                </a-form-item>
                <a-form-item :label="$ct('ruleCode', '规则编码')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="规则编码"
                        v-decorator="['ruleCode', { rules: [{ required: true, message: '请输入规则编码！' },], },]" />
                </a-form-item>
                <a-form-item :label="$ct('rulePrefix', '编号前缀')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="编号前缀" @change="getExample" v-decorator="['rulePrefix', {
                        rules: [{ required: true, message: '请输入编号前缀' },],
                    },]" />
                </a-form-item>
                <a-form-item :label="$ct('ruleDateFormat', '日期格式')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select placeholder="日期格式" @change="getExample" v-decorator="['ruleDateFormat', {
                        rules: [{ required: true, message: '请选择日期组成' },],
                    }]">
                        <a-select-option value="yy">当前年--23</a-select-option>
                        <a-select-option value="yyyy">当前年--2023</a-select-option>
                        <a-select-option value="yyMM">当前年月--2301</a-select-option>
                        <a-select-option value="yyyyMM">当前年月--202301</a-select-option>
                        <a-select-option value="yyMMdd">当前年月日--230101</a-select-option>
                        <a-select-option value="yyyyMMdd">当前年月日--20230101</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label="$ct('ruleDigit', '流水号位数')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="流水号位数" @change="getDigit" v-decorator="['ruleDigit', {
                        rules: [
                            { required: true, message: '请输入流水号位数！' },
                            { pattern: /^[0-9]+$/, message: '请输入数字', trigger: 'blur' },
                            { pattern: /^(?:[1-9]|10)$/, message: '输入的数字必须在 1 和 10 之间', trigger: 'blur' }]
                    },]" />
                </a-form-item>
                <a-form-item :label="$ct('ruleStartNumber', '流水号起始')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="流水号起始" @change="getExample" v-decorator="['ruleStartNumber', {
                        rules: [
                            { required: true, message: '请输入流水号起始', trigger: 'blur' },
                            { pattern: /^[0-9]+$/, message: '请输入数字', trigger: 'blur' },
                        ]
                    }]" :maxLength="maxNum" />
                </a-form-item>
                <a-form-item :label="$ct('example', '示例')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="示例" disabled v-decorator="['ruleExample']" />
                </a-form-item>
                <a-form-item :label="$ct('ruleSort', '排序')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input-number placeholder="排序" v-decorator="['ruleSort', {
                        rules: [{
                            pattern: /^[1-9]\d*$/,
                            message: '请输入大于等于1的整数!',
                            trigger: 'blur'
                        },],
                    },]" :min="1" :max="100000" />
                </a-form-item>
                <a-form-item :label="$ct('state', '状态')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-switch v-decorator="['ruleStatus', { initialValue: true, valuePropName: 'checked' }]" />
                </a-form-item>
                <a-form-item :label="$ct('ruleRemake', '备注')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-textarea placeholder="备注" v-decorator="['ruleRemake']" />
                </a-form-item>
                <a-form-item class="hiddenItem">
                    <a-input v-decorator="['uuid']" type="hidden" />
                </a-form-item>
            </a-form>
        </a-spin>
    </t-modal>
</template>

<script>
import pick from "lodash.pick";
// 表单字段
const fields = [
    "uuid",
    "creatorId",
    "creator",
    "createTime",
    "modifierId",
    "modifier",
    'modifierTime',
    'tenantUuid',
    'creatorOrgId',
    "ruleName",
    "ruleCode",
    "rulePrefix",
    "ruleDateFormat",
    "ruleDigit",
    "ruleStartNumber",
    "ruleExample",
    "ruleThisNumber",
    "ruleOutputNumber",
    "ruleSort",
    "ruleRemake",
    "ruleStatus",

];
import TDictSelectTag from "@/components/TopVUI/dict/TDictSelectTag";
import TMultiSelectTag from "@/components/TopVUI/dict/TMultiSelectTag";
import DepartPopup from "@/components/TopVUI/custom/DepartPopup";
import moment from 'moment';
export default {
    props: {
        visible: {
            type: Boolean,
            required: true
        },
        loading: {
            type: Boolean,
            default: () => false
        },
        model: {
            type: Object,
            default: () => null
        }
    },
    components: {
        TDictSelectTag,
        TMultiSelectTag,
        DepartPopup
    },
    data() {
        return {
            title: "",
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 5
                }
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 16
                }
            },
            form: this.$form.createForm(this),
            maxNum: null,
        };
    },
    methods: {
        moment,
        // 流水号位数限制流水号起始长度
        getDigit() {
            this.$nextTick(() => {
                this.form.setFieldsValue({ ruleStartNumber: '' });
                const ruleDigit = this.form.getFieldValue('ruleDigit');
                this.maxNum = parseInt(ruleDigit)
            })
        },
        // 自动生成示例
        getExample() {
            this.$nextTick(() => {
                const prefix = this.form.getFieldValue('rulePrefix');
                const dateFormat = this.form.getFieldValue('ruleDateFormat');
                let startNumber = this.form.getFieldValue('ruleStartNumber') || '';
                let ruleExample = '';
                if (prefix !== undefined) {
                    ruleExample += prefix;
                }
                if (dateFormat !== undefined) {
                    let currentDate = '';
                    switch (dateFormat) {
                        case 'yy':
                            currentDate = new Date().getFullYear().toString().slice(-2);
                            break;
                        case 'yyyy':
                            currentDate = new Date().getFullYear().toString();
                            break;
                        case 'yyMM':
                            currentDate = moment().format('YYMM');
                            break;
                        case 'yyMMdd':
                            currentDate = moment().format('YYMMDD');
                            break;
                        case 'yyyyMM':
                            currentDate = moment().format('YYYYMM');
                            break;
                        case 'yyyyMMdd':
                            currentDate = moment().format('YYYYMMDD');
                            break;
                    }
                    ruleExample += currentDate;
                }
                // 非空校验+补0
                if (startNumber !== undefined) {
                    if (startNumber.length < this.maxNum) {
                        const zeroes = '0'.repeat(this.maxNum - startNumber.length);
                        startNumber = `${zeroes}${startNumber}`
                        ruleExample += startNumber;
                    } else {
                        ruleExample += startNumber;
                    }
                }

                this.form.setFieldsValue({
                    ruleExample,
                });
            })
        },
        add(m) {
            this.$nextTick(() => {
                this.form.setFieldsValue({
                    puuid: m.puuid,
                    code: m.code
                });
            });
        },
        edit(m) {
            if (m.ruleStatus === 'true') {
                m.ruleStatus = true
            } else {
                m.ruleStatus = false
            }
            this.form.setFieldsValue(pick(m, fields));
        }
    },
    created() {
        // 防止表单未注册
        fields.forEach((v) => this.form.getFieldDecorator(v));
    },
};
</script>
